<style lang="scss" scoped>
    @import '../../css/training.scss';
    @import '../../css/exam2.scss';
    .show-answer-txt{cursor: pointer;}
    .exam-ones{border:none;width: 100%;}
</style>

<template>
    <section>
        <section class="prewiew-btn clearfix">
            <section class="fr">
                <!--<el-button class="ml20 btn-active btn-or" >导出</el-button>-->
                <el-button class="ml20 btn-active btn-or" @click="toPrint">打印</el-button>
            </section>
        </section>

        <div id="subOutputRank-print">
            <single-table :columns="columns" :tableData="tableData">
                <!--打印开始-->
                <section class="exam-preview-box">
            <ul class="exam-preview">

                <li class="p-relative mt preview-content">
                    <div class="p-absolute show-answer-txt">
                        <section v-show="examAnswerShow" @click="isShowAnswerTxt" class="fs-14">
                            <img class="public-icon mr" src="http://jhsy-img.caizhu.com/sass/images/Training-ic-display.png" alt="">显示答案
                        </section>
                        <section v-show="examAnswerHide" @click="isShowAnswerTxt" class="fs-14">
                            <img class="public-icon mr" src="http://jhsy-img.caizhu.com/sass/images/Training-ic-hides.png" alt="">隐藏答案
                        </section>
                    </div>
                    <p class="pb20 pt20 train-name">{{form.ExamTitle}}</p>
                    <p>本次考试满分：{{form.TotalScore}}分，及格分{{form.PassScore}}分</p>
                    <p class="mt">单选题：{{form.SingleChoiceNum}}道，共{{form.SingleChoiceScore}}分</p>
                    <p class="mt">多选题：{{form.MultiChoiceNum}}道，共{{form.MultiChoiceScore}}分</p>
                    <p class="mt">问答题：{{form.AskAnswerNum}}道，共{{form.AskAnswerScore}}分</p>
                    <div class="space-line mb20 mt20"></div>
                    <p>{{form.ExamDesc}}</p>

                    <!-- 开始题目循环 -->
                    <template v-for="outer,index in form.Questions">   <!-- QuestionType:1, 多选题  2，单选题 3，问答 -->
                        <!-- 单选题+多选题 -->
                        <!-- &lt;!&ndash; 显示状态 &ndash;&gt;-->
                        <section>  <!-- 显示状态 -->
                            <div class="exam-one clearfix mt20 exam-ones" v-if="outer.QuestionType!=3">
                                <div class="examo-lef">
                                    <div class="">Q{{index+1}}</div>
                                </div>
                                <div class="examo-rig">
                                    <!-- 标题 -->
                                    <div class="examo-tit examo-line  clearfix">
                                        <div class="examo-f01">
                                            <span v-if="outer.QuestionType==1">【多选题】</span>
                                            <span v-else>【单选题】</span>

                                            <span class="">{{outer.QuestionTitle}}</span>
                                        </div>
                                        <div class="examo-f02">
                                            <span>{{outer.RightScore}}</span>
                                            <span>分</span>
                                        </div>
                                    </div>
                                    <!-- 选项 -->

                                    <!--答案隐藏状态-->

                                    <div class="examo-one examo-line mt20 clearfix" v-for="one,iIndex in outer.Answers">
                                        <div class="examo-f00">
                                            <el-radio v-model.number="outer.RightAnswerIndexs" :label="iIndex" v-if="outer.QuestionType==2">{{answerArr[iIndex]}}</el-radio>

                                            <label v-else>
                                                <span class="exam-checkbox" :class="judgeCheckOn(iIndex, outer.RightAnswerIndexs)?'checked':''"></span>
                                            </label>
                                            <span>{{one.AnswerValue}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 问答题 -->
                            <div class="exam-one clearfix mt20" v-else>
                                <div class="examo-lef">
                                    <div class="">Q{{index+1}}</div>
                                </div>
                                <div class="examo-rig">

                                    <div class="examo-one examo-line clearfix">
                                        <div class="examo-f00">
                                            <!--<el-input class="examo-inp00" placeholder="标题"></el-input>-->
                                            {{outer.QuestionTitle}}
                                        </div>
                                        <div class="examo-f01">
                                            <span>【问答题】</span>
                                        </div>
                                        <div class="examo-f02">
                                            <span>{{outer.RightScore}}</span>
                                            <span>分</span>
                                        </div>
                                    </div>
                                    <div class="mt20">
                                        <!--{{outer.Answers[0].AnswerValue}}-->
                                        <!--<el-input type="textarea" :rows="5" placeholder="请输入问答答案...">
                                        </el-input>-->
                                    </div>
                                </div>
                            </div>

                        </section>

                    </template>





                </li>

            </ul>

        </section>
                <!--打印结束-->
            </single-table>
        </div>

    </section>
</template>

<script>

	import qs from 'qs'

	let answerArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];


	export default{
		data: function(){
			return {
				examAnswerShow: true,
				examAnswerHide: false,

                form:{

                },

				answerArr:answerArr,

            }
		},
		mixins: [mixinMethods],
		methods: {
			initExamInfo(){
				var ExamID = this.$route.query.ExamID;
				if(ExamID == undefined || !ExamID){
					localStorage.getItem("formInfo");
					let form = localStorage.getItem("formInfo");
					let form1 = JSON.parse(form);
					this.form =form1.form;
				}else if(ExamID){
					if(ExamID > 0){
						axios.post('/com/exam/get', qs.stringify({
							ExamID: ExamID
						})).then( (res)=>{
							var d = res.data;

							if(d.flag == 1){
								d = d.data;
								d.AllowCostTime = +d.AllowCostTime;
								d.Questions.forEach(function(one){       // 转number
									if(one.QuestionType==2){
										one.RightAnswerIndexs = +one.RightAnswerIndexs;
									}
								})
								this.form = d;
								this.form.ExamID = ExamID;
							}
						} );
					}
				}


            },
			isShowAnswerTxt(){  //点击显示
				let self = this;
				self.examAnswerShow = !self.examAnswerShow;
				self.examAnswerHide = !self.examAnswerHide;


            },

			/* 多选重置设置 */
			judgeCheckOn: function(index, arr){      // 判断选项多选是否选中
				if(arr.indexOf(index) > -1){
					return true;
				}
				return false;
			},

			toPrint(){  // 打印
				// 打印

                this.printContent();
			},
			printContent(e){
				let subOutputRankPrint = document.getElementById('subOutputRank-print');
				console.log(subOutputRankPrint.innerHTML);
				let newContent =subOutputRankPrint.innerHTML;
				let oldContent = document.body.innerHTML;
				document.body.innerHTML = newContent;
				window.print();
				window.location.reload();
				document.body.innerHTML = oldContent;
				return false;
			},


		},
		mounted: function(){

			this.initExamInfo();

		}
	}


</script>
